{include file="header"}
<style>
    .layui-btn-danger{
        margin-left: 0;
    }
</style>
<div class="x-nav">
    <!--           <span class="layui-breadcrumb">-->
    <!--            <a href="">{:lang("system")}</a>-->
    <!--            <a href="">TV管理</a>-->
    <a>
        <cite style="font-size: 18px;">{:lang("user.index")}</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" href="/" style="line-height:1.6em;margin-top:3px;float:right" title="返回主页">
        <i class="layui-icon" style="line-height:30px">返回主页</i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="parent.xadmin.add_tab('{:lang("user.add")}','{:url("user/add")}')"><i class="layui-icon"></i>{:lang("add")}</button>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>{:lang("roles")}</th>
                            <th>{:lang("username")}</th>
                            <th>{:lang("name")}</th>
                            <th>{:lang("phone")}</th>
                            <th width="70">{:lang('status')}</th>
                            <th>{:lang('action')}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="lists" id="item"}
                        <tr class="tr_{$item.id}">
                            <td>{$item.id}</td>
                            <td>{$item.role_name}</td>
                            <td>{$item.username}</td>
                            <td>{$item.name}</td>
                            <td>{$item.phone}</td>
                            <td>

                                <button type="button" class="layui-btn layui-btn-xs" id="display_{$item.id}_1" onclick="display(0,'{$item.id}')" {if $item.display eq 0}style="display: none;"{/if}>{:lang('default')}</button>

                                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="display_{$item.id}_2" onclick="display(1,'{$item.id}')" {if $item.display eq 1}style="display: none;"{/if}>{:lang('blockade')}</button>
                            </td>
                            <td>
                                <a href="javascript:;" class="rnglj" onclick="xadmin.open('{:lang("user.pass")}','{:url("user/pass",["id"=>$item["id"]])}',400,400)">{:lang('edit')}{:lang('pass')}</a>
                                <a href="javascript:;" class="rnglj" onclick="xadmin.open('{:lang('user.edit')}','{:url("user/edit",["id"=>$item["id"]])}',500,500)">{:lang('edit')}</a>
                                <a href="javascript:;" class="rnglj" onclick="del('{$item.id}')">{:lang('del')}</a>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body ">
                    {$lists|raw}
                </div>
            </div>
        </div>
    </div>
</div>

{include file="footer"}
<script>
    function del(id) {
        layer.confirm("{:lang('del.confirm')}",{icon: 3, title:'{:lang("tips")}'},function (index) {
            layer.close(index);
            request("POST",'{:url("user/del")}',{
                id:id
            },function (res) {
                $(`.tr_${id}`).remove()
            })

        })
    }
    function display(status,id) {
        var str
        if(status === 1){
            str = "{:lang('confirm')}{:lang('Lift.the.ban')}{:lang('this')}:{:lang('username')}"
        }else{
            str = "{:lang('confirm')}{:lang('blockade')}{:lang('this')}:{:lang('username')}"
        }
        layer.confirm(str,{icon: 3, title:'{:lang("tips")}'},function (index) {
            layer.close(index);
            request("POST",'{:url("user/display")}',{
                id:id,
                display:status
            },function (res) {
                if(status === 1){
                    $(`#display_${id}_1`).show()
                    $(`#display_${id}_2`).hide()
                }else{
                    $(`#display_${id}_1`).hide()
                    $(`#display_${id}_2`).show()
                }
            })

        })
    }
</script>